<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>了解我们</title>
</head>

<style>

    div[id="anv0"]{
            position:fixed ;
            top:0%;
            left:0%;
            right: 0%;
            width:100%;
            height:55px;
            background:linear-gradient(to bottom,rgba(225,225,225,0.9) 0.1%,rgb(0,0,0,0)) ;
            z-index: 999;
        }
    div[id="anv0"]:hover{
        background-color: rgb(255, 255, 255);
    }

    a[id="exit"]{
        text-decoration: none;
        position:fixed;
        top:30px;
        left:1050px;
        font-size: 20px;
        font-family: 楷体;
        font-weight: bold;
        color:rgb(255, 12, 12);
        z-index: 9999;
        margin: 0%;
    }

    img[id="导航栏logo1"]{
        width:150px;
        height:55px;
        position: fixed;
        left:250px;
        top:0%;
        z-index: 9999;
    }
    img[id="导航栏logo2"]{
        width:50px;
        height:50px;
        position: fixed;
        left:200px;
        top:0;
        z-index: 9999;
    }

    p[id="getusername"]{
        position:fixed;
        top:5px;
        left:1050px;
        font-size: 24px;
        font-family: 楷体;
        font-weight: bold;
        color:black;
        z-index: 9999;
        margin: 0%;
    }


    div[id="anv1"]{
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 500px;
        background-color: black;
        z-index:-1;
    }

    div[id="anv2"]{
        position: absolute;
        top:100px;
        left:550px;
    }
    
     div[id="anv2-1"]{
            position: absolute;
            top:520px;
            left:10px;
            width:700px;
            height:360px;
        }
        
        div[id="anv2-2"]{
            position: absolute;
            top:550px;
            left:320px;
        }

        p[id="anv2-2-p1"]{
            font-family: "楷体";
            font-size: 55px;
            color:rgb(127, 99, 40);
            padding: 5px;
            margin:0%;
        }

        p[id="anv2-2-p2"]{
            font-family: "楷体";
            font-size: 20px;
            color:rgb(127, 99, 40);
            padding:10px;
        }
        
     div[id="divforLogo"]{
        position: absolute;
        top:560px;
        left:1050px;
    }

    div[id="divforUl"]{
        position: absolute;
        top:680px;
        left:350px;
    }

	    li[id="li1"]{
	        position: relative;
	        left:500px;
	        top:0px;
	        list-style: none;
	        width:80px;
	        line-height: 30px;
	        height:30px;
	        margin: 10px;
	        float: left;
	        font-family: "楷体";
	        font-weight: bold;
	        font-size: 16px;
	        color:rgb(0, 0, 0);
	        background-color: rgba(255, 255, 255, 0.6);
	        border-radius: 8px;
	        border: 1px solid pink;
	    }
	    li[id="li1-1"]{
	        position: relative;
	        left:500px;
	        top:0px;
	        list-style: none;
	        width:80px;
	        line-height: 30px;
	        height:30px;
	        margin: 10px;
	        float: left;
	        font-family: "楷体";
	        font-weight: bold;
	        font-size: 16px;
	        color:rgb(0, 0, 0);
	        padding: 10px;
	        border-radius: 15px;
	        background-color: rgb(247, 181, 181);
	        border-radius: 8px;
	        border: 1px solid pink;
	    }
	
	    li[id="li1"]:hover{
	        padding: 10px;
	        border-radius: 15px;
	        background-color: rgb(247, 181, 181);
	    }

    div[id="anv3"]{
        position: absolute;
        width:460px;
        height:60px;
        padding: 10px;
        border-radius: 10px;
        margin:10px;
        top:780px;
        left:850px;
        background-color: rgba(0, 0, 0, 0.7);
    }

        p[id="anv3-p"]{
            margin: 0px;
            font-size:18px;
            color:white;
        }

    div[id="anv4"]{
        position: absolute;
        top:950px;
        left:0%;
        width:100%;
        height: 90px;
        background-color: rgb(244, 255, 222,0.8);
        z-index:-1;
    }

        div[id="anv4-1"]{
            position: absolute;
            top:950px;
            left:500px;
            width:600px;
            height: 80px;
        }

    a:link{
        color: black;
    }

</style>

<body>

    

    <div id="anv0"></div>
    <img id="导航栏logo1" src="Imgs/导航栏logo.png" /><img id="导航栏logo2" src="Imgs/uplogo.png" />
    <p id="getusername"><font style="font-size:20px;color:rgb(0, 0, 0);">欢迎您:</font><%=session.getAttribute("username")%></p>
    <a id="exit" href="loadIn.jsp">注销</a>

    <div id="anv1">

        <img src="Imgs/block1.png" width=100% height=100%/>

    </div>

    <div id="anv2">
        <img src="Imgs/contactUs.png" width="80%" height="80%">
    </div>

    <div id="divforLogo">
        <img src="Imgs/logo.png" width="80px" height="90px"/>
    </div>
    
    <div id="anv2-1"><img src="Imgs/block2.png"/></div>
    <div id="anv2-2">
        <p id="anv2-2-p1">"BUY IT SHOP"</p>
        <p><hr></p>
        <p id="anv2-2-p2">品牌成立：2022年5月01日</p>
        <p id="anv2-2-p2">致力于为用户提供更好的购物体验</p>
        <p id="anv2-2-p2">主要产品：服装、饰品、礼品</p>
    </div>
    
    <div id="divforUl">
    <ul>
        <li id="li1"><a href="mainScene.jsp" style="text-decoration: none;">首页</a></li>
        <li id="li1"><a href="shopCenter.jsp" style="text-decoration: none;">购物中心</a></li>
        <li id="li1"><a href="personalDetails.jsp" style="text-decoration: none;">个人中心</a></li>
        <li id="li1-1"><a href="learnAboutUs.jsp" style="text-decoration: none;">联系我们</a></li>
    </ul>
    </div>

    <div id="anv3">
        <p id="anv3-p"><strong>Tel</strong>&nbsp;&nbsp;:&nbsp;&nbsp;17816752712&nbsp;&nbsp;&nbsp;<strong>WeChat</strong>&nbsp;&nbsp;:&nbsp;&nbsp;Lsq_17816752712</p>
        <p id="anv3-p"><strong>QQ</strong>&nbsp;&nbsp;:&nbsp;&nbsp;2690254859&nbsp;&nbsp;&nbsp;<strong>E-mail</strong>&nbsp;&nbsp;:&nbsp;&nbsp;2690254859@qq.com</p>
    </div>

    <div id="anv4"><img src="Imgs/block4.png" style="filter:blur(20px)" width="100%" height="100%" /></div>
    <div id="anv4-1">
        <p style="font-size:25px;font-family:楷体;color:rgb(255, 255, 255);margin: 0;">BUY IT SHOP.com</p>
        <hr color="black">
        <p style="font-size:20px;font-family:楷体;color:rgb(255, 255, 255);margin: 0;">李上勤 电子商务系统设计与分析课设项目 2022-5-01</p>
    </div>

</body>
</html>